<template>
  <div class="list">

    <div class="tab">
      <el-row :gutter="10">
        <div class="col">
          <el-col :span="12">
            <el-form :model="roomForm" :inline="true">
              <el-form-item style="margin: 0;">
                <el-input placeholder="请输入查询的房间型号" style="width: 170px;" v-model="roomForm.roomType"></el-input>
                <el-input placeholder="请输入查询的房间号" style="width: 160px;" v-model="roomForm.address"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-search" type="success" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-button @click="tranSort">{{ pricesSort }}</el-button>
          </el-col>
        </div>
        

      </el-row>
    </div>
    <el-table
    :data="rooms"
    style="width: 100%">
    <el-table-column
      prop="imageUrl"
      label="图片"
      width="">
      <template slot-scope="scope">
         <img :src="scope.row.imageUrl"  width="170px" height="100px">
      </template>
    </el-table-column>
    <el-table-column
      prop="roomType"
      label="房间型号"
      width="">
    </el-table-column>
   <el-table-column
      prop="bedsNumber"
      label="床的数量">
      <template slot-scope="scope">
            <div>{{ bedsNum(scope.row.bedsNumber) }}</div>
        </template>
    </el-table-column>
    <el-table-column
      prop="address"
      label="房间位置"
      width="">
    </el-table-column>
    <el-table-column
      prop="prices"
      label="价格/h">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="bookRoom(scope.row)">预定</el-button>
      </template>
    </el-table-column>
    

   <!--  -->

  </el-table>
  <div class="pager">
    <el-pagination
    background
    layout="prev, pager, next,total"
    :total="total"
    :page-size="pageData.pageSize"
    @current-change="handlePage">
    </el-pagination>
  </div>
  
  <el-dialog
    title="请选择预定时间"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <el-form :rules="rules" ref="form" :model="form" label-width="100px">
      <el-form-item label="预定时间" required>
        <el-col :span="11">
        <el-form-item prop="date1">
        <el-date-picker type="date" :picker-options="expireDateOption" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
        </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
        <el-form-item prop="date2">
        <el-time-picker placeholder="选择时间" :picker-options="expireTimeOption" value-format="HH:mm:ss"  v-model="form.date2" style="width: 100%;"></el-time-picker>   
       </el-form-item>
      </el-col>
      </el-form-item>
      <el-form-item>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getTimeAndSend('form')">确 定</el-button>
      </el-form-item>
      
    </el-form>
  </el-dialog>
   
  </div>
</template>

<script>
import {getRooms} from "@/api/room";
import{book} from '@/api/book'
export default {
  name: "List",
  data(){
    return{
      rooms:[],
      pageData:{
        page: 1,
        pageSize: 5,
        state:0
      },
      roomForm:{
        roomType:'',
        address:'',
        prices:'cel'
      },
      dialogVisible:false,
      total:0,
      form:{
        date1:'',
        date2:'',
      },
      pricesSort:'价格升序',
      
      roomId:'',
    }
  },
  computed:{
    rules(){
      return{
        date1:[ { required: true,message: '请选择日期', trigger: 'change' }],
        date2:[ {  required: true, message: '请选择时间', trigger: 'change' }],
      }
    },
    expireDateOption(){
      // console.log('typeof------', Date.now() - 8.64e7+ 15*24*60*60*1000  );
      return{
        disabledDate(time){// < Date.now() - 8.64e7
          return  time.getTime() >Date.now() - 8.64e7+ 15*24*60*60*1000|| time.getTime() < Date.now() - 8.64e7
        },
      }
    },
    expireTimeOption(){
      let time = this.linkTime()
      return{
        selectableRange:time
      }
    }
  },
  methods:{
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    handlePage(val){
      this.pageData.page = val
      this.getList()
      
    },
    getTimeAndSend(form){
      this.$refs[form].validate((valid) => {
        if(valid){
          let params = {
            roomId:this.roomId,
            bookTime : this.form.date1+' '+this.form.date2,
            userId: localStorage.getItem('tokenUser')
          }
          // console.log('数据预订的参数---》',params);
          book(params).then(data =>{
            // console.log(data);
            if(data.status ===200){
              if(data.data.code ===1){
                this.$message.success(data.data.data)
                this.getList()
                this.form = {}
              }else{
                this.$message.error(data.data.msg)
              }
              
            }else{
              this.$message.error("服务器出问题了！！")
            }
            
          }).catch(err=>{
            this.$message.error("出错了",err)
          })
          this.dialogVisible = false
          this.form = {}

        }
        
      })
    },
    bookRoom(row){
      this.dialogVisible = true
      this.roomId = row.id
    },
    getList(){
      getRooms({params:{...this.pageData,...this.roomForm}}).then((data)=>{
        // console.log('数据展示---》',data);
        this.rooms = data.data.data.records
        this.total = Number(data.data.data.total)    
        }).catch(err =>{
          this.$message.error("出错了",err)
        })
    },
    linkTime(){
      var date1 = new Date()
      var date2 = new Date(this.form.date1)
      let time = '00:00:00 - 23:59:59'
      if(date1.getMonth() == date2.getMonth() && (date2.getDate()-date1.getDate()==0)){
        time = date1.getHours()+':'+date1.getMinutes() + ':' + date1.getSeconds()+ ' - 23:59:59'
        this.form.date2 = time
        this.$message.success('过去时间不可选，自动跳转到当前时间')
      }    
      return time
    },
    onSubmit(){
      this.getList()
    },
    tranSort(){
      
      if(this.pricesSort == '价格升序'){
        this.roomForm.prices = 'order'
        this.pricesSort = '取消升序'
      }else if(this.pricesSort == '取消升序'){
        
        this.roomForm.prices = 'cel'
        this.pricesSort = '价格升序'
      }
      this.getList()
    },
    bedsNum(number){
      if(number == 1){
        return '单人床'
      }else if(number == 2){
        return '双人床'
      }else if(number == 4){
        return '两张双人床'
      }
    },
    
  },
  mounted() {
    this.getList()
    
  },

}
</script>

<style lang="less" scoped>
.list{
  height:  calc(100vh - 70px);
  width: calc(100vw - 150px);
  .tab{
    .col{
      display: flex;
      justify-content:center;
     
    }
  }
  .pager{
    position: absolute;
    bottom: 30px;
    // right: 20px;
    left: 50%;
  }
}





</style>
